import React, { Component } from 'react'

import { Card} from 'antd'
import Axios from '../../axios'

import './detail.less'


export default class detail extends Component {
    state = {}
    componentDidMount() {
        let orderId = this.props.match.params.orderId;
        if (orderId) {
            this.getDetailInfo(orderId);
        }
    }
    getDetailInfo = (orderId) => {
        Axios.ajax({
            url: "/order/detail",
               data:{
                params:{
                  orderId:orderId
                }
               } 
        }).then((res) => {
            if (res.code === "0"||res.code===0) {
                this.setState({
                    orderInfo: res.result
                })
                this.renderMap(res.result);
            }
        })
    }
    // 使用gd地图步骤
    renderMap(result) {
        // 获得中心点
        let Lon = result.position_list[0].lon / 2 + result.position_list[result.position_list.length- 1].lon / 2;
        let Lat = result.position_list[0].lat / 2 + result.position_list[result.position_list.length - 1].lat / 2;
        // 1.初始化地图 声明地图对象
         this.map = new window.AMap.Map('orderDetailMap', {
            resizeEnable: true, //是否监控地图容器尺寸变化
            zoom: 10.5, //初始化地图层级
             center: [Lon,  Lat] //初始化地图中心点
        });
        
        
        this.addMapControl();
        // //    调用路线图绘制方法
        this.drawBikeRoute(result.position_list);
        // //    调用服务区的方法 
        this.drawServiceArea(result.area);
    }
    // 2.添加地图控件 放大或缩小
    addMapControl = () => {
        
        let map = this.map;
        // map.plugin([
        //     'AMap.ToolBar',
        // ], function () {
        //     // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        //     map.addControl(new window.AMap.ToolBar({
        //         // 简易缩放模式，默认为 false
        //         liteStyle: true
        //     }));
        // });
        //另一种带旋转的
        map.plugin(["AMap.ControlBar"], function () {
            var controlBar = new window.AMap.ControlBar()
            map.addControl(controlBar)
        });
    }
    // 3.绘制用户的形式路线图 positionList行驶路程坐标点
    drawBikeRoute = (positionList) => {
        //    获取map对象
        let map = this.map;
        // 3.1起始坐标点
        let startPoint = '';
        // 3.2终止坐标点 
        let endPoint = '';
        //    创建起始的marker
        if (positionList.length > 0) {
            let AMap=window.AMap
            let first = positionList[0];
            let last = positionList[positionList.length - 1];
            startPoint = new window.AMap.LngLat(first.lon, first.lat);
            endPoint = new window.AMap.LngLat(last.lon, last.lat);
            // 创建一个 Icon
            let startIcon = new AMap.Icon({
                // 图标尺寸
                size: new AMap.Size(36, 42),
                // 图标的取图地址
                image: '/assets/start_point.png',
                // 图标所用图片大小
                imageSize: new AMap.Size(36,42),
                // 图标取图偏移量
                // // imageOffset: new AMap.Pixel(16,42)
            });
            let endIcon = new AMap.Icon({
                // 图标尺寸
                size: new AMap.Size(36, 42),
                // 图标的取图地址
                image: '/assets/end_point.png',
                // 图标所用图片大小
                imageSize: new AMap.Size(36, 42),
                // 图标取图偏移量
                // // imageOffset: new AMap.Pixel(16,42)
            });

            // 将 icon 传入 marker
            console.log(first)
            let startMarker = new AMap.Marker({
                position: startPoint,
                icon: startIcon,
                offset: new AMap.Pixel(-16,-42)
            });
            let endMarker = new AMap.Marker({
                position: endPoint,
                icon: endIcon,
                offset: new AMap.Pixel(-16, -42)
            });
            
            // 连接路线图
            let trackPoint = [];
            for (let i = 0; i < positionList.length; i++) {
                let point = positionList[i];
                trackPoint.push(new window.AMap.LngLat(point.lon, point.lat))
            }
            let polyline = new AMap.Polyline({
                path: trackPoint,
                strokeColor: '#1869AD',
                strokeWeight: 3,
                strokeOpacity: 1
            })
            // 将 markers 添加到地图
            map.add([polyline, startMarker, endMarker]);
        }}
    // 绘制服务区
    drawServiceArea = (positionList) => {
        // 连接路线图
        let trackPoint = [];
        for (let i = 0; i < positionList.length; i++) {
            let point = positionList[i];
            trackPoint.push(new window.AMap.LngLat(point.lon, point.lat));
        }
        // 绘制服务区
        let polygon = new window.AMap.Polygon({
            path: trackPoint,
            strokeColor: '#CE0000',
            strokeWeight: 4,
            strokeOpacity: 1,
            fillColor: '#ff8605',
            fillOpacity: 0.4
        })
        this.map.add([polygon]);
    }
    render() {
        const info = this.state.orderInfo || {};
        return (
            <div>
                <Card>
                    <div id="orderDetailMap" className="order-map"></div>
                    <div className="detail-items">
                        <div className="item-title">基础信息</div>
                        <ul className="detail-form">
                            <li>
                                <div className="detail-form-left">用车模式</div>
                                <div className="detail-form-right">{info.mode === 1||info.mode === '1' ? '服务区' : '停车点'}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">订单编号</div>
                                <div className="detail-form-right">{info.order_sn}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">车辆编号</div>
                                <div className="detail-form-right">{info.bike_sn}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">用户姓名</div>
                                <div className="detail-form-right">{info.user_name}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">手机号码</div>
                                <div className="detail-form-right">{info.mobile}</div>
                            </li>
                        </ul>
                    </div>
                    <div className="detail-items">
                        <div className="item-title">行驶轨迹</div>
                        <ul className="detail-form">
                            <li>
                                <div className="detail-form-left">行驶起点</div>
                                <div className="detail-form-right">{info.start_location}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">行驶终点</div>
                                <div className="detail-form-right">{info.end_location}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">行驶里程</div>
                                <div className="detail-form-right">{info.distance / 1000}公里</div>
                            </li>
                        </ul>
                    </div>
                </Card>
            </div>
        )
    }
}
